<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Sydney Live Traffic</title>
		<meta name="author" content="mili" />
		<!-- Date: 2012-11-30 -->
		<!-- css -->
   		<style type="text/css">
     		body {
        	margin: 0;
        	padding: 10px 20px 20px;
        	font-family: Arial;
        	font-size: 16px;
      	}

      	#map_canvas {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 800px;
      	}

      	#map {
        width: 1000px;
        height: 700px;
      	}

      	#actions {
        list-style: none;
        padding: 0;
      	}

      	#inline-actions {
        padding-top: 10px;
      	}

      	.item {
        margin-left: 20px;
      	}
    	</style>
	</head>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIUdFMR8K_PNs7X7olurDe6_QBXhSBmpU&sensor=false&libraries=visualization"></script>
	<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript" src="client_program/lib/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="client_program/src/init.js"></script> 
	<script type="text/javascript" src="client_program/src/incident.js"></script>
	<script type="text/javascript" src="client_program/src/commonJsonParse.js"></script>
	<script type="text/javascript" src="client_program/src/propertiesJsonParse.js"></script>
	<script type="text/javascript" src="client_program/src/roadJsonParse.js"></script>
	<script type="text/javascript" src="client_program/src/CONSTANT.js"></script>
	<script type="text/javascript" src="client_program/src/loadTimeStamp.js"></script>
	<script type="text/javascript" src="client_program/src/trigger.js"></script>
	<script type="text/javascript" src="client_program/src/f3.js"></script>
	<script type="text/javascript" src="client_program/src/m4.js"></script>
	<script type="text/javascript" src="client_program/src/m7.js"></script>
	<body onload="init();">
		<div id="map_canvas" style="height: 700px; width: 1000px;"></div>
		<form name="timestamp">
			<label for="timeline">Select Time:</label>
			<select name="timeline" size="1">
				<option value="time1">time1</option>
				<option value="time2">time2</option>
				<option value="time3">time3</option>
				<option value="time4">time4</option>
				<option value="time5">time5</option>
				<option value="time6">time6</option>
				<option value="time7">time7</option>
				<option value="time8">time8</option>
				<option value="time9">time9</option>
				<option value="time10">time10</option>
			</select>
		</form>
			<button onclick="display();return false">View</button>
		<div>
			<label>Choose Type:</label>
			<button onclick="switchCluster()">ClusterMarker</button>
			<button onclick="switchHeatMap()">Heatmap</button>
			<button onclick="switchTimeFlag()">Switch Time Flag</button>
		</div>
		<div>
			<!-- input class="button" id="switchButton" type="button" value="debug off" onclick="switchMode()"/-->
		</div>
	</body>
</html>

